import React, { useState, useEffect } from 'react'
import { Form, Input, Select, message } from 'antd';
import Http from '../../../Utils/Http';
import { getVerificationCode, ResetPasswordIsPhone, ResetPasswordIsEmail } from 'Api/api';
import './resetPwd.scss'
import SVG from 'components/SVG';
const loginBtnBg = require('assets/account/btn-bg@2x.png')
const { Option } = Select;
interface LoginProps {
    phoneNum: string,
    historyStep: string,
    setStep: (val: string) => any,
    setPhone: (val: string) => any,
    setHistoryStep: (val: string) => any,
}
interface IresetPWd {
    account_phone: string,
    auth_Code: string,
    u_password: string,
}
interface finishData {
    error: string,
    data: IresetPWd
}

function ResetPwd(props: LoginProps) {
    const { phoneNum, historyStep, setStep, setPhone, setHistoryStep } = props;
    const [form] = Form.useForm();
    const [num, setNum] = useState<number>(60) // 倒计时
    const [isSend, setIsSend] = useState<boolean>(false) // 是否发送验证码
    const prefixSelector = (
        <Select defaultValue='86' style={{
            width: 70
        }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
        </Select>
    );
    // 发送验证码
    const sendCode = () => {
        if (!isSend) {
            setIsSend(true)
            Http.get(`${getVerificationCode}?phone=${phoneNum}`).then(res => {
                if (res.data) {
                    message.success('验证码获取成功！')
                }
            })
        }
    }
    const resetPasswordIsEmail = () => {
        const resetData: any = form.getFieldsValue();

        const isReset: finishData = onFinishFailed(resetData);
        if (isReset.error) {
            message.error(isReset.error);
            return false
        }
        Http.put(`${ResetPasswordIsPhone}`, isReset.data).then((res: any) => {
            if (res.code === 1) {
                setPhone(isReset.data.account_phone);
                message.success('密码更新成功！');
                setStep('4');
                setHistoryStep('3');
            } else {
                message.error(res.msg)
            }
        })
    }
    const resetPwd = (resetInfo: any) => {
        const isReset: finishData = onFinishFailed(resetInfo);
        if (isReset.error) {
            message.error(isReset.error);
            return false
        }
        Http.put(`${ResetPasswordIsPhone}`, isReset.data).then((res: any) => {
            if (res.code === 0) {
                message.error(res.msg)
            } else {
                setPhone(isReset.data.account_phone);
                message.success('密码更新成功！');
                setStep('4');
                setHistoryStep('3');
            }
        })
    }

    const onFinishFailed: (createInfo: IresetPWd) => finishData = (createInfo) => {
        let error: string = '', data: IresetPWd = {
            account_phone: '',
            auth_Code: '',
            u_password: '',
        }
        if (!createInfo.account_phone) {
            error = error || "请输入手机号";
        } else {
            data.account_phone = createInfo.account_phone;
        }
        if (!createInfo.auth_Code) {
            error = error || "请输入验证码";
        } else {
            data.auth_Code = createInfo.auth_Code;
        }
        if (!createInfo.u_password) {
            error = error || "请输入密码";
        } else {
            data.u_password = createInfo.u_password;
        }
        return {
            error,
            data
        }
    }
    const getCaptcha = (
        <div className='get-captcha-bnt' onClick={sendCode}>
            {
                num === 60 ? '获取验证码' : num
            }
        </div>
    )
    useEffect(() => {
        let timer: any = 0;
        if (isSend && num !== 0) {
            timer = setInterval(() => {
                setNum(n => {
                    if (n === 1) {
                        setIsSend(false)
                        clearInterval(timer)
                        setNum(60)
                    }
                    return n - 1
                });
            }, 1000)
        }
        return () => {
            clearInterval(timer)
        };
    }, [isSend])

    return (
        <div className='reset-box animate-route'>
            <p className='reset-box-title' >解锁新技能,上天赋树</p>
            <div className='reset-form'>
                <div onClick={() => { setStep(historyStep) }}>
                    <SVG xlinkHref='icon-fanhui' className='reset-return' />
                </div>
                <p className='reset-form-title'>
                    重置密码
                            </p>
                <Form name='reset'
                    form={form}
                    onFinish={resetPwd}
                    initialValues={{ account_phone: phoneNum }}>
                    <Form.Item
                        name="account_phone"
                    >
                        <Input className='reset-form-account one' placeholder='请输入手机号' addonBefore={prefixSelector} style={{ width: '100%' }} onChange={(e:any)=>{
                            setPhone(e.target.value+'')
                        }}/>
                    </Form.Item>

                    <Form.Item
                        name="auth_Code">
                        <Input className='reset-form-account two' placeholder='请输入验证码' addonAfter={getCaptcha} />
                    </Form.Item>
                    <Form.Item
                        name="u_password" className='reset-form-input'>
                        <Input.Password placeholder="请输入密码" style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item>
                        <button className='reset-btn' type='submit'>
                            <img src={loginBtnBg} alt="登录按钮背景" />
                            确认通过关联邮箱重置密码</button>
                    </Form.Item>
                    <Form.Item>
                        <div className='reset-mode'>
                            <p onClick={resetPasswordIsEmail}>使用邮箱找回密码</p>
                            {/* <div>
                                <img src={Wechat} alt="登录按钮背景" className='wechat' />
                                <span>微信登录</span>
                            </div> */}
                        </div>
                    </Form.Item>
                </Form>
            </div>
        </div >
    )
}

export default ResetPwd
